let keys = document.querySelectorAll(".key")
let topKey = document.querySelector("#topKey")
let leftBox = document.querySelector("#leftBox")
let rightBox = document.querySelector("#rightBox")
let leftslot = document.querySelector("#leftslot")
let lefthead = document.querySelector("#lefthead")
let nav = document.querySelector("#nav")
let vsioncard = document.querySelector("#vsioncard")
let navheight = parseFloat(getComputedStyle(nav).height)
let vsioncardheight = parseFloat(getComputedStyle(vsioncard).height)
let leftbasicElem = `<div class="leftbasicElem">
						琴谱名字：
						<input id="MusicName" type="text" placeholder="输入一个琴谱的名字">
						<p>字体大小
							<input type="range" id="MusicNameFontSize">
							<input type="color" id="MusicNameColor">
						</p>
						<p></p>
						<div>
							<span class="badge badge-danger">R</span>
							封面插图：
							启用
							<input id="IstopImage" type="checkbox" oninput="drawTopImage()">
							<input type="file" id="FilleSelect">
						</div>
						
					</div>`
console.log(navigator.userAgent);
var os = function() {
	var ua = navigator.userAgent,
		isWindowsPhone = /(?:Windows Phone)/.test(ua),
		isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
		isAndroid = /(?:Android)/.test(ua),
		isFireFox = /(?:Firefox)/.test(ua),
		isChrome = /(?:Chrome|CriOS)/.test(ua),
		isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox &&
			/(?:Tablet)/.test(ua)),
		isPhone = /(?:iPhone)/.test(ua) && !isTablet,
		isPc = !isPhone && !isAndroid && !isSymbian;
	return {
		isTablet: isTablet,
		isPhone: isPhone,
		isAndroid: isAndroid,
		isPc: isPc
	};
}();


var tabls = document.getElementById("Browse_tabs")
if (os.isAndroid || os.isPhone) {
	console.log("手机")
	topKey.classList.remove("key-def")
	leftBox.classList.remove("leftBox")
	leftBox.classList.add("leftBoxphone")
	rightBox.classList.remove("rightBox")
	rightBox.classList.add("rightBoxphone")
	lefthead.innerHTML = '';
	leftslot.innerHTML = leftbasicElem



	// tabls.innerText = "客户端：Phone"
	// var bx = $("#bodybox");
	// bx.removeClass("pt-5")
	// bx.css("padding-top", "6rem");
} else if (os.isTablet) {
	console.log('平板')
	topKey.classList.remove("key-def")
	leftBox.classList.remove("leftBox")
	leftBox.classList.add("leftBoxphone")
	rightBox.classList.remove("rightBox")
	rightBox.classList.add("rightBoxphone")
	lefthead.innerHTML = '';
	leftslot.innerHTML = leftbasicElem



	// tabls.innerText = "客户端：Flat plate"
} else if (os.isPc) {
	console.log("电脑")
	$("#handle").css("display", "none")
	// tabls.innerText= "客户端：PC"
} else {
	// tabls.innerText= "客户端：无法识别"
	console.log("无法识别")
	$("#handle").css("display", "none")
}

// const rightBoxCopy = document.getElementById('rightBoxCopy');
const handle = document.getElementById('handle');
let isResizing = false;
let startY = 0;


let rightboxheight = parseFloat(getComputedStyle(rightBox).height) * 0.32;
console.log(rightboxheight)
leftBox.style.top = `${rightboxheight + vsioncardheight + navheight +80}px`
handle.style.top = `${rightboxheight + vsioncardheight + navheight +60}px`

//在手机模式下，需要有缩放

handle.addEventListener('mousedown', startResize);
handle.addEventListener('touchstart', startResize, {
	passive: false
});

function startResize(e) {
	isResizing = true;
	if (e.type === 'mousedown') {
		startY = e.clientY;
	} else if (e.type === 'touchstart') {
		startY = e.touches[0].clientY;
	}
	document.addEventListener('mousemove', resize);
	document.addEventListener('touchmove', resize, {
		passive: false
	});
	document.addEventListener('mouseup', stopResize);
	document.addEventListener('touchend', stopResize, {
		passive: false
	});
}

let maxrightboxheight = 300

function resize(e) {
	e.preventDefault();
	if (isResizing) {
		const newHeight = rightBox.clientHeight + (e.clientY || e.touches[0].clientY) - startY;
		if (newHeight >= maxrightboxheight) {
			rightBox.style.height = `${newHeight}px`;
			console.log(newHeight)
			// console.log(getComputedStyle(handle).top)
			leftBox.style.top = `${newHeight*0.32 + vsioncardheight + navheight +80}px`
			handle.style.top = `${newHeight*0.32 + vsioncardheight + navheight +60}px`
		}
		// newHeight = Math.min(Math.max(newHeight, 300), 400);
		startY = e.clientY || e.touches[0].clientY;
	}
}

function stopResize() {
	isResizing = false;
	document.removeEventListener('mousemove', resize);
	document.removeEventListener('touchmove', resize);
	document.removeEventListener('mouseup', stopResize);
	document.removeEventListener('touchend', stopResize);
}